<!--
 * @Author       : xh
 * @Date         : 2022-09-01 20:40:51
 * @LastEditors  : xh
 * @FileName     :
-->
<template>
  <el-card>
    <el-form :inline="true" :model="searchParam" class="demo-form-inline">
      <el-form-item label="员工工号：">
        <el-input v-model="searchParam.staffNum" />
      </el-form-item>
      <el-form-item label="员工姓名：">
        <el-input v-model="searchParam.name" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSearch">搜索</el-button>
      </el-form-item>
    </el-form>
    <el-table
      v-loading="loading"
      size="default"
      :data="tableData"
      style="margin-top: 10px"
      :highlight-current-row="true"
    >
      <el-table-column prop="name" label="姓名" />
      <el-table-column prop="loginAccount" label="账号" />
      <el-table-column prop="staffNum" label="工号" />
      <el-table-column prop="deptNames" label="部门" />
      <el-table-column prop="phone" label="手机号" />
      <el-table-column prop="roleNames" label="角色" show-overflow-tooltip />
      <el-table-column prop="createTime" label="创建时间" />
      <el-table-column label="操作">
        <template #default="scope">
          <el-button link type="primary" size="small" @click="handleRole(scope.row)"
            >设置角色</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <p class="role-page">
      <el-pagination
        v-model:currentPage="currentPage"
        :background="true"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @current-change="handleCurrentChange"
      />
    </p>
    <son ref="sonRef" :get-list="getList"></son>
  </el-card>
</template>
<script   setup>
import { reactive } from 'vue'
import { onMounted, ref, getCurrentInstance } from 'vue'
import { internetApi } from '@/api/api.js'
import Son from './dialog.vue'

import useTable from '@hoo/useTable'
const searchParam = reactive({
  staffNum: '',
  name: ''
})

const { loading, currentPage, total, handleCurrentChange, getList, tableData } = useTable({
  url: internetApi.staffList,
  data: { name: searchParam.name, staffNum: searchParam.staffNum }
})
const sonRef = ref(null)

const handleRole = (row) => { 
  sonRef.value.openDialog(row, 'role')
}
const onSearch = () => {
  getList()
}

onMounted(() => {
  getList()
})
</script>
<style lang="scss" scoped>
.role-page {
  display: flex;
  padding-top: 20px;
  justify-content: flex-end;
}
</style>
